<template>
  <el-table :data="model.getList()" :row-class-name="tableIndex" @row-click="tableRowIndex" style="width: 100%;">
    <el-table-column :label="plugin.lang('inbound.goods.name')" min-width="150" prop="name">
      <template #default="scope">
        <el-avatar shape="square" v-if="scope.row.goods_image" :size="45" :src="app.img(scope.row.goods_image)" class="goods-image" />
        <div class="goods-name">
          <!-- 作用与当前商品索引改变时，能触发列表更新 -->
          <div :goods_id="model.index.value" :row-index="scope.row.rowIndex = scope.$index"></div>
          <div class="item wrap">
            {{ scope.row.goods_name }}
          </div>
          <div class="item wrap code">
            {{ scope.row.goods_number }} <el-tag v-if="scope.row.unit" size="small">{{ scope.row.unit }}*{{ scope.row.unit_count }}</el-tag>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('inbound.goods.count')" align="center">
      <template #default="scope">
        <el-tag class="tag" size="large" effect="plain">{{ scope.row.count }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('inbound.goods.price')" align="center">
      <template #default="scope">
        <el-tag class="tag" type="success" size="large" effect="plain">{{ money(scope.row.price) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column :label="plugin.lang('inbound.goods.price_tax')" align="center">
      <template #default="scope">
        <el-tag class="tag" type="warning" size="large" effect="plain">{{ money(scope.row.price_tax) }}</el-tag>
      </template>
    </el-table-column>
    <el-table-column fixed="right" width="60">
      <template #default="scope">
        <div style="text-align: right">
          <el-button 
            :loading="loading"
            type="danger" 
            style="padding: 8px;min-height:30px"
            @click="onDel(scope.$index)" 
            plain
            circle 
          >
            <template #icon>
              <i class="iconfont min icon-close-max"></i>
            </template>
          </el-button>
        </div>
      </template>
    </el-table-column>
  </el-table>
  <KeyCode 
    @add="onCount" 
    @sub="onCountSub" 
    @space="onPrice" 
    @mul="onUnit" 
    @up="onUp" 
    @down="onDown"
    @left="onLeft"
    @delete="onDelete"
  />
</template>

<script>
import { ref, nextTick } from 'vue'
import app from '@/app'
import model from '../../model/create'

import KeyCode from '@/components/keyCode'

export default {
  components: {
    KeyCode
  },
  setup() {

    // 如果没有输入，将自增
    const onCount = data => {
      if(data == '') {
        model.updateCount(1, true)
      } else {
        model.updateCount(data)
      }
    }

    // 如果没有输入，将自减
    const onCountSub = data => {
      model.updateCount(data == '' ? -1 : -1 * parseInt(data), true)
    }

    // 数量*规格 
    const onUnit = data => {
      if(model.getGoods().unit) {
        // 与规格数量相乘 ,果没有输入，将自乘
        model.updateCount(model.getGoods().unit_count * (parseInt(data) ? parseInt(parseFloat(data)) : model.getGoods().count))
      }
    }

    // 价格快捷键
    const onPrice = data => {
      model.updatePrice(data)
    }

    // 税后价格
    const onLeft = data => {
      model.updatePriceTax(data)
    }

    // 指针向上
    const onUp = () => {
      // 更新当前操作商品
      model.indexGoods(model.getIndex() - 1)
    }

    // 指针向下
    const onDown = () => {
      // 更新当前操作商品
      model.indexGoods(model.getIndex() + 1)
    }

    // 删除商品
    const loading = ref(false)
    const onDel = async (id) => {
      loading.value = true
      model.del(id)

      // 使用 loading 方式，让添加商品按钮 loading 取消焦点
      await nextTick()
      loading.value = false
    }

    // 删除商品
    const onDelete = () => {
      model.del(model.getIndex())
    }

    // 表格指向
    const tableIndex = ({ rowIndex }) => {
      if(rowIndex == model.getIndex()) {
        return 'table-row-on flash'
      }
    }

    // 表格点击指向
    const tableRowIndex = (row) => {
      model.indexGoods(row.rowIndex)
    }

    return {
      app,
      plugin: app.plugin.index,
      money: app.money,
      model,
      onCount,
      onCountSub,
      onPrice,
      onUnit,
      onUp,
      onDown,
      onLeft,
      loading,
      onDel,
      onDelete,
      tableIndex,
      tableRowIndex
    }
  }
}
</script>